<script type="text/javascript" src="/public/js/kendo/src/js/kendo.web.js"></script>
<script type="text/javascript" src="/public/js/kendo/src/js/cultures/kendo.culture.vi-VN.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.common.css">
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.default.css">

<script type="text/javascript" src="/public/js/bootstrap/bootstrap-multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap-multiselect.css">
<script type="text/javascript" src="/public/js/my_plugin/adminPriceEdit.js"></script>
<script type="text/javascript" src="/public/js/extend.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/my_plugin/adminPriceEdit.css">

<style>
        /*less make sense */
    .dish-table tr td{
        color: #444;
        cursor: pointer;
    }

    out-dish-table tr td{
        color: #444;
        cursor: pointer;
    }

</style>
<?php
use Core\Config;
use Zend\Json\Json;

$domainItem = $this->domainItem;
$day = $this->day;
$day_code = $this->day_code;


$lang = \Core\Session\FrontSessionHelper::getCurrentLang();
$allMainCategories = $this->allMainCategories;

?>

<hr />

<ol class="breadcrumb bc-3">
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin"><i class="entypo-home"></i>Home</a>
    </li>
    <li >
        <a href="/<?php echo $domainItem->domain ?>/mon-an/thuc-don-ngay">Thực đơn ngày</a>
    </li>

    <li class="active">
        <strong><?php echo 'Nhập thực đơn ngày';
            ?></strong>
    </li>

</ol>
<div class="row" style="padding: 5px">
    <h4>Quản lý thực đơn <strong><?php echo $day?>.</strong>&nbsp;&nbsp;&nbsp;<small>Double click vào món ăn trong bảng <strong>thực đơn chung</strong> để chuyển sang bảng <strong>thực đơn hôm nay</strong></small></h4>
</div>
<div class="row" style="padding: 5px 10px">
    <a class="btn btn-blue btn-icon" type="button" onclick="saveDayRecipes()">
        Lưu thực đơn
        <i class="entypo-check"></i>
    </a>
</div>
<div class="row">
    <div class="col-xs-6" style="padding: 10px;" >
        <div style="background-color: #1a8baf; text-align: center; padding: 5px"><h4 style="color: #fff"><strong>Thực đơn chung</strong></h4></div>
        <div class="panel-group joined" id="my_accordion">

            <?php
            $dishTable = \Resmodel\Factory\ResTableGatewayFactory::getDishTable();

            foreach ($allMainCategories as $aGroup) {
                $allDishOfCategory = $dishTable->getAllDishOfCategory($aGroup->id, 1);
                echo '<div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title" style="background-color: #c5e8f7">
                        <input type="hidden" value="'.$aGroup->id.'">
                        <a data-toggle="collapse"  href="#collapseOne-'.$aGroup->id.'">
                            <strong>'.$aGroup->name.'</strong>
                        </a>
                    </h4>
                </div>
                <div id="collapseOne-'.$aGroup->id.'" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table class="table table-responsive dish-table">
                        <tbody>';

                foreach ($allDishOfCategory as $aDish) {
                    echo '<tr><td><input type="hidden" value="'.$aDish->id.'"/> <div><span>'.$aDish->name.
                        '</span><a style="float:right" class="btn btn-success hide" type="button">
                        <i class="entypo-right"></i>
                        </a></div></td></tr>';
                }

                echo '</tbody>
                        </table>
                    </div>
                </div>
            </div>';
            }
            ?>

        </div>
    </div>
    <div class="col-xs-6"  style="padding: 10px;" >
        <div style="background-color: #1a8baf; text-align: center; padding: 5px"><h4 style="color: #fff"><strong>Thực đơn hôm nay</strong></h4></div>
        <div class="panel-group joined" id="my_accordion_out">

            <?php
            $dayDishTable = \Resmodel\Factory\ResTableGatewayFactory::getDayDishTable();

            foreach ($allMainCategories as $aGroup) {
                $allDishOfCategory = $dayDishTable->getAllDishInDayByCat($day_code, $aGroup->id);
                echo '<div class="panel panel-info">
                <div class="panel-heading">
                    <h4 class="panel-title" style="background-color: #c5e8f7">
                        <input type="hidden" value="'.$aGroup->id.'">
                        <a data-toggle="collapse"  href="#collapseTwo-'.$aGroup->id.'">
                            '.$aGroup->name.'
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo-'.$aGroup->id.'" class="panel-collapse collapse in">
                    <div class="panel-body">
                    <table class="table table-responsive out-dish-table">
                        <tbody>';
                foreach ($allDishOfCategory as $aDish) {
                    echo '<tr><td><input type="hidden" value="'.$aDish->id.'"/> <div><span>'.$aDish->name.
                        '</span><a style="float:right" class="btn btn-success hide" type="button">
                        <i class="entypo-cancel"></i>
                        </a></div></td></tr>';
                }
                        echo '</tbody>
                        </table>
                    </div>
                </div>
            </div>';
            }
            ?>

        </div>
    </div>
</div>
<div class="row" style="padding: 5px 10px">
    <a class="btn btn-blue btn-icon" type="button" onclick="saveDayRecipes()">
        Lưu thực đơn
        <i class="entypo-check"></i>
    </a>
</div>

<script>
    $(document).ready(function(){

        $('.out-dish-table tr td').click(function(){
            $('.out-table tr td').css('background-color', '#fff')
            $('.out-table tr td').find('a').addClass('hide');
            $(this).css('background-color', '#f9d011')
            $(this).find('a').removeClass('hide');

        });

        $('.out-dish-table tr td a').click(function(){
            removeDish(this);
        })

        $('.out-dish-table tr td input').each(function(){
            dishId = $(this).val();
            $('.dish-table tr td :input[value="'+dishId+'"]').closest('tr').addClass('hide');
        })

        $('.dish-table tr td').click(function(){
            $('.dish-table tr td').css('background-color', '#fff')
            $('.dish-table tr td').find('a').addClass('hide');
            $(this).css('background-color', '#f9d011')
            $(this).find('a').removeClass('hide');
        });

        $('.dish-table tr td').dblclick(function(){
            doMoveDish(this);
        })

        $('.dish-table tr td a').click(function(){
            aTd = $(this).closest('td');
            doMoveDish(aTd);
        })

        function doMoveDish(aTd){
            dishid = $(aTd).find('input').val();
            dishname = $(aTd).find('div span').html();
            catid = $(aTd).closest('.panel-info').find('.panel-heading input').val();
            $(aTd).closest('tr').addClass('hide');
            $('#collapseTwo-'+catid +' table')
                .append('<tr><td><input type="hidden" value="'+dishid+'"><div>' +
                    '<span>'+dishname+'</span><a style="float:right" class="btn btn-success" type="button">' +
                    '<i class="entypo-cancel"></i>' +
                    '</a></div></td></tr>');

            $('.out-dish-table tr td').css('background-color', '#fff')
            $('#collapseTwo-'+catid +' table tr td :input[value="'+dishid+'"]')
                .closest('td').css('background-color', '#f9d011');
            $('.out-dish-table tr td').find('a').addClass('hide');
            $('#collapseTwo-'+catid +' table tr td :input[value="'+dishid+'"]')
                .closest('td').find('a').removeClass('hide');

            $('#collapseTwo-'+catid +' table tr td :input[value="'+dishid+'"]').
                closest('td').click(function(){
                    $('.out-dish-table tr td').css('background-color', '#fff')
                    $('.out-dish-table tr td').find('a').addClass('hide');
                    $(this).css('background-color', '#f9d011')
                    $(this).find('a').removeClass('hide');
                })

            $('#collapseTwo-'+catid +' table tr td :input[value="'+dishid+'"]').
                closest('td').find('a').click(function(){
                    removeDish(this);

                })
        }
    })

    function removeDish(aLink){
        parentTr = $(aLink).closest('tr');
        tmpDishId = parentTr.find('input').val();
        catId = parentTr.closest('.panel-info').find('.panel-heading input').val();
        $('#collapseOne-'+catId+' table tr td :input[value="'+tmpDishId+'"]').
            closest('tr').removeClass('hide');
        $('.dish-table tr td').css('background-color', '#fff')
        $('.dish-table tr td').find('a').addClass('hide');
        $('#collapseOne-'+catId+' table tr td :input[value="'+tmpDishId+'"]').
            closest('td').css('background-color', '#f9d011');
        $('#collapseOne-'+catId+' table tr td :input[value="'+tmpDishId+'"]').
            closest('td').find('a').removeClass('hide');

        parentTr.remove();
    }
    var opts = {
        "closeButton": true,
        "debug": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "10000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };

    function saveDayRecipes(){
        dishIdArr = [];
        $('#my_accordion_out table tr td input').each(function(){
            dishIdArr.push($(this).val());
        });
        $.blockUI({ message: 'Vui lòng chờ ... ' });
        $.post('<?php echo '/'.$domainItem->domain.'/admin/day-dish/save' ?>',{dishIdArr:dishIdArr, day:<?php echo '"'.$day_code.'"'?>}
            ,function(result){
                if (result.success){
                    toastr.info("Lưu thành công", "", opts);

                }else{
                    toastr.error("Lỗi: "+result.msg, "", opts);
                }
                $.unblockUI();

            },'json');

    }

</script>
<div class="hide" id="takeNoteWindow">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body" >

                <dl>
                    <dt style="padding: 5px">
                    <div class="row form-group">
                        <label class="col-sm-2 control-label" for="txtCategoryCode">Mô tả:</label>
                        <div class="col-sm-6">
                            <textarea id="txtEditNote" rows="5"   style="width: 400px;"></textarea>
                        </div>
                    </div>
                    </dt>

                </dl>
            </div>
            <div class="modal-footer">
                <a type="button" class="btn btn-default" data-dismiss="modal" >Đóng</a>
                <a type="button" class="btn btn-primary" id="btnSaveNote">Lưu</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>